<template>
  <div  id="streamingVideo" style="width: 100%;height: 100%;object-fit: fill;overflow: hidden;">
   <div ref="video" id="player"></div>
   <!-- <button @click="toUE">向UE发信息</button> -->
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import {
  initLoad,
  callUIInteraction,
  addResponseEventListener,
} from "../webrtcVideo.js";

export default {
  setup(props, context) {
    let video = ref(null);
    let videoInstance = ref(null);

    onMounted(() => {
      console.log("video.value", video.value);

      videoInstance = initLoad({
        context,
        serverUrl: "http://127.0.0.1:5173",
        autoConnection: false,
        showPlayOverlay: true,
        qualityControl: true,
        inputOptions: {
          controlScheme: 1, // 鼠标：0是锁定，1是滑过
          suppressBrowserKeys: false,
        },
      });

      addResponseEventListener("play-video", async (data) => {
        alert(data);
      });
    });

    return {
      video,
      toUE() {
        callUIInteraction("this is the first program !!!");
      },
    };
  },
};
</script>
<style scoped>
#player {
   width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: absolute;
  }
</style>